<?php
$ip = getenv("REMOTE_ADDR");
Helper::register("jquery-1.8.1.min.js");
Helper::register("jquery.limitkeypress.min.js");
?>
<style>
    #form_signup label {
        display: inline-block;
        width: 150px;
        text-align: right;
        margin-right: 10px;
        font-weight: bolder;
    }
    #form_signup {
        width: 400px;
        margin: 0px auto;
        margin-top: 40px;
    }
    #ee {
        color: #CD5C5C;
        text-align: right;
        margin-right: 50px;
        margin-top: 10px;
        font-weight: bolder;
    }
</style>
<script type="text/javascript">

    function clear_ee (){
        $("#ee").html("");
    }

    $(document).ready(function() {
        var name_ss = false;
        $("#btn_sign_in").click(function(){
           var account = $("#account").val();
           var pass = $("#pass").val();
           var pass2 = $("#pass2").val();
           var email = $("#email").val();
           var ip = $("#ip").val();
           var emailReg = /^[a-zA-Z0-9._-]+@[a-zA-Z0-9.-]+\.[a-zA-Z]{2,4}$/;
           if ( name_ss == false ) {
               clear_ee();
               $("#ee").html("Account have more than 3 characters");
               $("#account").css("background-color","rgba(250, 202, 202, 0.4)");
               $("#account").focus();
               return false;
           } else if ( pass.length < 3 ) {
               clear_ee();
               $("#ee").html("Password have more than 3 characters");
               $("#pass").focus();
               return false;
           } else if ( pass != pass2 ) {
               clear_ee()
               $("#ee").html("Password do not match.");
               $("#pass2").focus();
               return false;
           } else if (!emailReg.test(email) ) {
               clear_ee();
               $("#ee").html("Email format is not valid.");
               $("#email").focus();
               return false;
           } else {
               clear_ee();
               $("#ee").html("Successfully registered , Please Wait...");
               $("#ee").css("color","green");
               $('#account').attr('readonly', 'readonly');
               $('#pass').attr('readonly', 'readonly');
               $('#pass2').attr('readonly', 'readonly');
               $('#email').attr('readonly', 'readonly');
               $("#btn_sign_in").attr("disabled", "disabled");
               $.get("<?php echo $this->createUrl("/member/Sign_up"); ?>", { account:account , pass : pass ,email : email , ip : ip } ,
                       function (data){
                        if ( data == 1 ) {
                            setTimeout(function() {
                                window.location.href = "<?php echo Yii::app()->createUrl("/member/");?>";
                            }, 1000);
                        } else {
                            console.log(data);
                        }
               } );
           }
        });

        $("#account,#pass,#pass2").limitkeypress({ rexp: /^[A-Za-z0-9]*$/ });
        $('#account').bind('#account keyup', function(){
            var $this = $(this);
            var delay = 1000;
            var account = $('#account').val();
            clearTimeout($this.data('timer'));
            $this.data('timer', setTimeout(function(){
                $this.removeData('timer');
                $.get("<?php echo $this->createUrl("/member/getAccDataAll")?>", { account : account },
                        function(data){
                            console.log(data);
                            if ( data > 0 ) {
                                clear_ee();
                                $("#ee").html(account + " : This account has been used.");
                                $("#account").css("background-color","rgba(250, 202, 202, 0.4)");
                            } else {
                                if ( account.length <= 2 ) {
                                    clear_ee();
                                    $("#ee").html("Account have more than 3 characters");
                                    $("#account").css("background-color","rgba(250, 202, 202, 0.4)");
                                } else {
                                    clear_ee();
                                    $("#account").css("background-color","rgba(182, 222, 205, 0.4)");
                                    name_ss = true;
                                }
                            }
                 });
            }, delay));
        });




    });                           
</script> 
<div >
    <div class="box_right_head" style="padding-bottom: 6px;margin-bottom: 10px;"><?php echo CHtml::encode(Yii::app()->name); ?> Sign up !</div>
    <div id="form_signup">
        <label>Account : </label><input type="text" name="account" id="account" class="twitterStyleTextbox" placeholder="your account" ><br>
        <label>Password : </label><input type="password" name="pass" id="pass" class="twitterStyleTextbox" placeholder="your password" ><br>
        <label>Confirm Password : </label><input type="password" name="pass" id="pass2" class="twitterStyleTextbox" placeholder="your password" ><br>
        <label>Email : </label><input type="text" name="email" id="email" class="twitterStyleTextbox" placeholder="your email" ><br>
        <input type="hidden" name="ip" id="ip" value="<?php echo $ip; ?>">
        <label> </label><button class="clean-gray" style="margin-left: 96px;" id="btn_sign_in">Sign in</button>
        <div id="ee"></div>
    </div>

</div>
